import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { getChannelAction, changeActiveAction } from '../store/actions/channel'
import classnames from 'classnames' //方便追加多个classname

//页面中dispatch=>传入action=>reducer存储频道数据命令
export const Channel = () => {
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getChannelAction())
  }, [dispatch])

  //获取redux中频道数据
  const { list, activeId } = useSelector((store) => store.channell)

  //点击切换频道高亮命令
  const changeActive = (itemId) => {
    dispatch(changeActiveAction(itemId))
  }

  return (
    <ul className="category">
      {/* 渲染 */}
      {list.map((item) => (
        <li
          key={item.id}
          // className={activeId === item.id ? 'select' : ''}
          className={classnames({
            select: activeId === item.id,
            test: true,
            abc: false,
          })}
          onClick={() => changeActive(item.id)} //声明函数时要函数套函数传参
        >
          {item.name}
        </li>
      ))}
      {/* <li className="select">开发者资讯</li> 
      <li>ios</li>
      <li>c++</li>
      <li>android</li>
      <li>css</li>
      <li>数据库</li>
      <li>区块链</li>
      <li>go</li>
      <li>产品</li>
      <li>后端</li>
      <li>linux</li>
      <li>人工智能</li>
      <li>php</li>
      <li>javascript</li>
      <li>架构</li>
      <li>前端</li>
      <li>python</li>
      <li>java</li>
      <li>算法</li>
      <li>面试</li>
      <li>科技动态</li>
      <li>js</li>
      <li>设计</li>
      <li>数码产品</li>
      <li>html</li>
      <li>软件测试</li>
      <li>测试开发</li> */}
    </ul>
  )
}
